<div class="signin-container" fxLayout="row">
  <div class="signin-cover" fxFlex="100" fxFlex.gt-xs="50">
    <div fxLayout="column" fxLayoutAlign="center center" style="height: 100%;">
      <img src="assets/images/signin.svg" alt="">
    </div>
  </div>
  <div class="signin-content mat-elevation-z12" fxFlex="100" fxFlex.gt-xs="50">
    <mat-card-title>用户登录</mat-card-title>

    <form [formGroup]="userForm" (ngSubmit)="login()">
      <mat-form-field class="display-block">
        <input type="email" placeholder="请输入您的邮箱" formControlName="email" required matInput>
        <mat-error *ngIf="formErrors.email">{{formErrors.email}}</mat-error>
      </mat-form-field>

      <mat-form-field class="display-block">
        <input type="password" placeholder="请输入您的密码" formControlName="password" required matInput>
        <mat-error *ngIf="formErrors.password">{{formErrors.password}}</mat-error>
      </mat-form-field>

      <div class="signin-button" fxLayout="row" fxLayoutAlign="space-between center">
        <button mat-raised-button color="primary" type="submit" style="width: 48%;">登录</button>
        <button mat-raised-button [routerLink]="['/sigup']" style="width: 48%;">注册</button>
      </div>

      <mat-error *ngIf="formErrors.loginFailure">{{formErrors.loginFailure}}</mat-error>
    </form>

    <div class="other-sign">
      其他方式登陆
    </div>

    <button class="mat-raised-button capsule-button google-button m-b-15" (click)="signInWithGoogle()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/google-plus.svg">
        </div>
        <span class="capsule-button-text">Google 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button github-button m-b-15" (click)="signInWithGithub()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/github-logo.svg">
        </div>
        <span class="capsule-button-text">Github 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button facebook-button m-b-15">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/facebook.svg">
        </div>
        <span class="capsule-button-text">Facebook 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button any-button" (click)="signInAnonymously()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/firebase.svg">
        </div>
        <span class="capsule-button-text">游客 账号登录</span>
      </span>
    </button>

  </div>
</div>